import React, { useEffect, useState, Fragment } from 'react'
import { NavigationStackScreenComponent, HeaderBackButton, HeaderProps } from 'react-navigation-stack'
import { View, Image, Text, Alert, Button, TouchableOpacity } from 'react-native';
import { commonStyle, translateSize } from 'styles'
import { InfoLayout, RadiusButton } from 'components'
import assets from 'modules/assets'
import { identityDetailStyle } from './style'
import { IdentifyInfo } from 'native-modules/PosModule'
import { operate } from 'services/authorization';

const IdentityDetailScreen: NavigationStackScreenComponent<{
	nextRouteName: string
	data: IdentifyInfo
	onReadAgain: () => void
}> = props => {
	const [indentityData, setIdentifyData] = useState<IdentifyInfo>(props.navigation.getParam('data'))

	const baseInfo = (title: string, content: string) => {
		return (
			<View style={identityDetailStyle.baseContentTitle}>
				<Text style={identityDetailStyle.baseContentTitle}>{title}</Text>
				<Text style={identityDetailStyle.baseContent}>{content}</Text>
			</View>
		)
	}

	return (
		<View style={[commonStyle.containerColumn, identityDetailStyle.container]}>
			<View style={identityDetailStyle.baseInfoContainer}>
				<Image style={identityDetailStyle.avatar} source={assets.images.icon_building} />
				<View style={[commonStyle.containerColumn, identityDetailStyle.baseContentContainer]}>
					{baseInfo('姓名:', indentityData.name)}
					{baseInfo('性别:', indentityData.sex)}
					{baseInfo('名族:', indentityData.authority)}
					{baseInfo('出生日期:', indentityData.birthday)}
				</View>
			</View>
			<View style={identityDetailStyle.empty} />
			<InfoLayout title="签发机关:" content={indentityData.authority} />
			<InfoLayout title="有效期:" content={indentityData.expdate} />
			<InfoLayout title="公民身份证:" content={indentityData.cardNo} />
			<InfoLayout title="住址:" content={indentityData.address} />

			<View style={[commonStyle.containerRow, identityDetailStyle.btnContainer]}>
				<RadiusButton
					style={identityDetailStyle.btn}
					onPress={() => {
						props.navigation.pop()
						props.navigation.getParam('onReadAgain')()
						props.navigation.goBack();
					}}>
					<Text style={identityDetailStyle.btnContent}>重新读取</Text>
				</RadiusButton>
				<RadiusButton
					style={identityDetailStyle.btn}
					onPress={() => {
						props.navigation.navigate(props.navigation.getParam('nextRouteName'), { data: { idNumber: indentityData.cardNo } })
					}}>
					<Text style={identityDetailStyle.btnContent}>下一步</Text>
				</RadiusButton>
			</View>
		</View>
	)
}

IdentityDetailScreen.navigationOptions = props => {
	return {
		title: '确认身份证信息',
		headerLeft: (
			<Fragment>
				<TouchableOpacity
					activeOpacity={0.8}
					style={{ paddingHorizontal: translateSize(24) }}
					onPress={() => {
						console.log('111')
						operate()
						props.navigation.pop()
						props.navigation.getParam('onReadAgain')()
						props.navigation.goBack();
					}}>
					<Image source={assets.images.icon_arrow_left} style={{ width: translateSize(40) }} />
				</TouchableOpacity>
				<TouchableOpacity
					activeOpacity={0.8}
					style={{ paddingHorizontal: translateSize(24) }}
					onPress={() => {
						operate()
						props.navigation.push('AppHome')
					}}>
					<Image source={assets.images.icon_home} style={{ width: translateSize(34) }} />
				</TouchableOpacity></Fragment>
		),
	}
}

export default IdentityDetailScreen
